<html style="font-size: 50px;"><head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/home/css/reset.css">
  <link rel="stylesheet" href="/static/home/plug/layui/css/layui.css">
  <title>访客邀约</title>
  <script type="text/javascript" src="/static/home/js/jquery-3.1.1.min.js"></script>
  <script src="/static/home/plug/layui/layui.js"></script>
  <script>
    var local_url="/static/admin/js/";
    var deviceWidth = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  </script>
  <script src="/static/admin/js/base.js"></script>
  <style>
    *{
      padding: 0; margin: 0; box-sizing: border-box;
    }

    body{
      background: #fafafa; padding-top: 2.45rem;
    }
    .top{
      /*background: url(/static/home/images/tBg.png);*/
      background-color: #3271FD;
      width: 7.5rem; height: 1.12rem; background-size: 7.5rem; position: relative; padding: 0 0.32rem; justify-content: space-between; display: flex; align-items: center;
    }
    .storeName{
      font-size: 0.34rem; color: #fff; font-weight: bolder;
    }
    .applyBtn{
      color: #fff; font-size: 0.3rem; font-weight: bolder; width: 2.2rem; height: 0.66rem; background: #00BFFF; border-radius: 0.1rem; text-align: center; line-height: 0.66rem;
    }

    .menu{
      display: flex; width: 7.5rem; background: #fff;
    }
    .tap{
      width: 50%; margin: 0 0.32rem; font-size: 0.3rem; color: #999999; font-weight: bolder; text-align: center; line-height: 1rem; height: 1rem; box-sizing: border-box; cursor: pointer;
    }
    .line{
      width: 1px; height: 1rem; background: #dcdcdc;
    }
    .now{
      border-bottom: 0.04rem solid #3271FD; color: #3271FD;
    }

    .list,.list2{
      width: 6.88rem; border-radius: 0.12rem; box-shadow: 0px 0px 0.15rem 0.04rem rgba(224, 224, 224, 0.66);  margin: 0 auto 0.25rem; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer;
    }
    .typeD{
      display: flex; justify-content:space-between; align-items: flex-end; width: 100%;
    }
    .card{
      width: 2.57rem; height: 0.55rem; background: #00BFFF; border-bottom-right-radius: 0.24rem; color: #333333; text-align: center; line-height: 0.55rem; font-weight: bolder; font-size: 0.26rem;
    }
    .card2{
      width: 2.57rem; height: 0.55rem; background: #e4dab0;border-bottom-right-radius: 0.24rem; color: #333333; text-align: center; line-height: 0.55rem; font-weight: bolder; font-size: 0.26rem;
    }
    .card3{
      width: 2.57rem; height: 0.55rem; background: #dfdeda;border-bottom-right-radius: 0.24rem; color: #333333; text-align: center; line-height: 0.55rem; font-weight: bolder; font-size: 0.26rem;
    }
    .type{
      color: #aea16c; font-size: 0.24rem; font-weight: bolder; margin-right: 0.2rem;
    }
    .val{
      font-size: 0.28rem; color: #333333; font-weight: 500; padding: 0.32rem 0.2rem 0.38rem 0.42rem;
    }
    .val div{
      margin-bottom: 0.1rem
    }
    .applyName{
      display: flex; justify-content:space-between; align-items: center;
    }
    .applyName img{
      width: 0.11rem; height: 0.2rem
    }

    .view{
      font-size: 0.24rem; color: #3271FD; font-weight: bolder; text-decoration: underline; margin-top: 0.14rem; cursor: pointer;
    }

    .backBtn{
      font-size: 0.24rem; color: #aea16c; font-weight: bolder; width: 0.9rem; height: 0.44rem; text-align: center; border-radius: 0.06rem; margin-left: 0.2rem; border: 1px solid #aea16c; cursor: pointer;
    }
    .whyBtn{
      width: 0.3rem; height: 0.3rem; font-size: 0.26rem; font-weight: bolder; color: #fff; background: #aea16c; border-radius: 0.15rem; border: 0; cursor: pointer; margin-left: 0.18rem; cursor: pointer;
    }
    .content{display: none}

    .overflow{
      display: none;
    }
    .overflowbg{
      background: #000; opacity: 0.7; position: fixed; top: 0; left: 0; bottom: 0 ;right: 0; z-index: 3
    }
    .overflowBack,.overflowTips{
      position: fixed; top: 50%; left: 50%; color: #666666; font-size: 0.28rem; background: #fff; width: 6.15rem; height:; border-radius: 0.08rem; z-index: 3; transform: translate(-50%, -50%);  padding: 0 0.54rem 0.78rem;
    }
    .overflowTips{
      padding: 0.7rem 0.54rem 0.78rem 1.18rem;
    }
    .overflowTips div{
      margin-bottom: .12rem
    }
    .tips{
      margin-top: 1.4rem; text-align: center; font-weight: bolder;
    }
    .btns{
      display: flex; justify-content: space-between; margin-top: 1.15rem;
    }
    .btn{
      width: 2.35rem; height: 0.6rem; background: #aea16c; color: #aea16c; border: 1px solid #aea16c; border-radius: 0.31rem; font-size: 0.27rem;
    }
    .btn1,.btn3{
      background: #fff;
    }
    .btn2{
      color: #fff;
    }
    .btn3{
      margin-left:0.7rem; margin-top: -0.2rem;
    }
  </style>
  <link id="layuicss-layer" rel="stylesheet" href="/static/home/plug/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all"></head>
<body>
<div style="position:fixed; top: 0; left: 0; z-index: 2">
  <div class="top">
    <div class="storeName"><a href="/index/index/index.html" style="position: relative; top: -0.07rem">
      <img src="{__SGHOME_PATH}images/home.png" style="width: 0.9rem; padding: 0.1rem; cursor:pointer" />
    </a>访客邀约：</div>
    <div class="applyBtn" onclick="window.location.href='/index/index/addvisitor.html';">访客登记</div>
  </div>
  <div class="menu">
    <div class="tap{if $state eq 1} now{/if}" onclick="window.location.href='/index/index/visitor.html?state=1';">邀约中</div>
    <div class="line"></div>
    <div class="tap{if $state eq 2} now{/if}" onclick="window.location.href='/index/index/visitor.html?state=2';">已失效</div>
  </div>
</div>
<div id="content1" class="content" style="display: block">
  {foreach $lists.data as $list}
  <div class="list" onclick="window.location.href='/xcx/{$list.visitorkey}'">
    <div class="typeD">
      {if $state eq 1}
      <div class="card">邀约中</div>
      {elseif $state eq 2}
      <div class="card3">已失效</div>
      {/if}
    </div>
    <div class="val">
      <div class="applyName">邀约码：{$list.visitorkey} <img src="/static/home/images/icon.png"></div>
      <div>访客姓名：{$list.visitoruname}</div>
      <div>访客手机号码：{$list.visitorphone}</div>
      <div>邀约时间：{$list.visitorstime|date='Y-m-d H:i',###}</div>
      <div>短信发送状态：<b>{if $list.sendmsg_state eq 1}发送成功{else}发送失败{/if}</b></div>

      {if $state eq 1}
      <div class="view" data-id="{$list.id}" data-key="{$list.visitorkey}">取消邀约</div>
      {/if}
    </div>
  </div>
  {/foreach}
</div>

<script>

  layui.use(['element', 'form', 'jquery','lucky'], function () {
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.jquery;
    var lucky=layui.lucky;

    var curpage = 1;
    var scrollbot=true;
    var last_page = '2';
    // console.log(last_page);

    var state = '{$state}';
    // console.log(state);

    $(window).scroll(function () {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = window.screen.height;
      if (scrollTop >= (scrollHeight - windowHeight)) {
        if (scrollbot) {
          scrollbot=false;
          console.log(curpage + 1);
          if(last_page >= curpage + 1){
            pageindex(curpage + 1);
          }
          else {
            //layer.msg("已经到底了！");
          }
        }
        else {
          //layer.msg("已经到底了！");
        }
      }
    });

    function pageindex(page) {
      $.ajax({
        type: "GET",
        url: '/index/index/visitor.html',
        data: {page:page,state:state,type:'1'},
        dataType: 'json',
        error: function(error) {
          layer.msg("服务器错误或超时");
          return false;
        },
        beforeSend:function(){
          layer.load();
        },
        success: function (data) {
          console.log(data);
          // return false;
          last_page = data.last_page;
          if(page <= last_page){
            scrollbot=true;
            var strhtm = '';
            var dataarr = data.data;
            curpage++;
            for (var i = 0; i < dataarr.length; i++) {
              strhtm += '<div class="list" onclick="window.location.href=' + "'/xcx/" + dataarr[i].visitorkey+"'"+'">';

              strhtm += '<div class="typeD">';
              if(state == 1){
                strhtm += '<div class="card">邀约中</div>';
              }
              else if(state == 2){
                strhtm += '<div class="card3">已失效</div>';
              }
              strhtm += '</div>';

              strhtm += '<div class="val"><div class="applyName">邀约码：'+dataarr[i].visitorkey+' <img src="/static/home/images/icon.png"/></div>';
              strhtm += '<div>访客姓名：'+dataarr[i].visitoruname+'</div>';
              strhtm += '<div>访客手机号码：'+dataarr[i].visitorphone+'</div>';
              strhtm += '<div>邀约时间：'+dataarr[i].visitorstime+'</div>';

              strhtm += '<div>短信发送状态：<b>';
              if(dataarr[i].sendmsg_state == 1){
                strhtm += '发送成功';
              }
              else{
                strhtm += '发送失败';
              }
              strhtm += '</b></div>';


              if(state == 1){
                strhtm += '<div class="view" data-id="' + dataarr[i].id + '" data-key="' + dataarr[i].visitorkey + '">取消邀约</div>';
              }

              strhtm += '</div></div>';
            }
            // console.log(strhtm);
            $('.content').append(strhtm);
            $(".view").on("click",function (event){
              event.stopPropagation();
              // window.location.href='/flowmobile/flowview?id='+$(this).data("id");
              var id = $(this).data("id");
              var key = $(this).data("key");
              layer.confirm("确定要取消"+key+"的邀约吗？",function () {
                $.ajax({
                  url: "{:url('index/cancelvisitor')}",
                  dataType: 'json',
                  type:'post',
                  data:{id:id},
                  timeout:120000,
                  beforeSend: function (input) {
                    loading = layer.load(2, {
                      shade: [0.2, '#000'] //0.2透明度的白色背景
                    });
                  },
                  success: function(data){
                    console.log(data);
                    layer.close(loading);
                    /*lucky.CreateReload("table_id");
                    layer.alert(data.msg);*/
                    if (data.code==1) {
                      layer.msg(data.msg,{icon: 1, time: 3000,shade:0.3, anim: 4});
                    }else{
                      layer.msg(data.msg,{icon:15,time:2000,shade:0.3,anim:4});
                    }
                  },
                  error: function(xml, errstr, err) {
                    layer.close(loading);
                    layer.alert(errstr+'，获取数据失败！');
                  }
                });
              });
            })
          }
          else{
            //layer.msg("已经到底了！");
          }
        },
        complete:function(){
          layer.closeAll('loading');
        }
      });
    }

    $(".view").on("click",function (event){
      event.stopPropagation();
      // window.location.href='/flowmobile/flowview?id='+$(this).data("id");
      var id = $(this).data("id");
      var key = $(this).data("key");
      layer.confirm("确定要取消"+key+"的邀约吗？",function () {
        $.ajax({
          url: "{:url('index/cancelvisitor')}",
          dataType: 'json',
          type:'post',
          data:{id:id},
          timeout:120000,
          beforeSend: function (input) {
            loading = layer.load(2, {
              shade: [0.2, '#000'] //0.2透明度的白色背景
            });
          },
          success: function(data){
            console.log(data);
            layer.close(loading);
            /*lucky.CreateReload("table_id");
            layer.alert(data.msg);*/
            if (data.code==1) {
              layer.msg(data.msg,{icon: 1, time: 3000,shade:0.3, anim: 4});
            }else{
              layer.msg(data.msg,{icon:15,time:2000,shade:0.3,anim:4});
            }
          },
          error: function(xml, errstr, err) {
            layer.close(loading);
            layer.alert(errstr+'，获取数据失败！');
          }
        });
      });
    });


  });


</script>

<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(["setDocumentTitle", document.title]);
  _paq.push(['setUserId', '{if $homeuser_info.oaid}{$homeuser_info.oaid}{else}{$homeuser_info.user_id}{/if}']);
  _paq.push(['setCustomDimension', 1, 'H5']);
  _paq.push(['setCustomDimension', 2, 'H5']);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  _paq.push(['enableHeartBeatTimer']);
  (function() {
    var u="https://tracking.gtcloud.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1041']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

</body>
</html>